<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/";
	String basePath2 = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
textarea {
	height: 300px;
	width: 100%;
	resize: none;
	outline: none;
}

input[type=button] {
	float: right;
	margin: 5px;
	width: 50px;
	height: 35px;
	border: none;
	color: white;
	font-weight: bold;
	outline: none;
}

.clear {
	background: red;
}

.send {
	background: green;
}

.clear:active {
	background: yellow;
}

.send:active {
	background: yellow;
}

.msg {
	width: 100%;
	height: 25px;
	outline: none;
}

#content {
	border: 1px solid gray;
	width: 100%;
	height: 400px;
	overflow-y: scroll;
}

.from {
	background-color: green;
	width: 80%;
	border-radius: 10px;
	height: 30px;
	line-height: 30px;
	margin: 5px;
	float: left;
	color: white;
	padding: 5px;
	font-size: 22px;
}

.to {
	background-color: gray;
	width: 80%;
	border-radius: 10px;
	height: 30px;
	line-height: 30px;
	margin: 5px;
	float: right;
	color: white;
	padding: 5px;
	font-size: 22px;
}

.name {
	color: gray;
	font-size: 12px;
}

.tmsg_text {
	color: white;
	background-color: rgb(47, 47, 47);
	font-size: 18px;
	border-radius: 5px;
	padding: 2px;
}

.fmsg_text {
	color: white;
	background-color: rgb(66, 138, 140);
	font-size: 18px;
	border-radius: 5px;
	padding: 2px;
}

.sfmsg_text {
	color: white;
	background-color: rgb(148, 16, 16);
	font-size: 18px;
	border-radius: 5px;
	padding: 2px;
}

.tmsg {
	clear: both;
	float: right;
	width: 80%;
	text-align: right;
}

.fmsg {
	clear: both;
	float: left;
	width: 80%;
}
</style>
<script>
	var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
	var path = '<%=basePath%>';
	var uid=generateMixed(6);
	var from = uid;
	var fromName = generateMixed(6);
	var websocket;
	
	function generateMixed(n) {
	     var res = "";
	     for(var i = 0; i < n ; i ++) {
	         var id = Math.ceil(Math.random()*35);
	         res += chars[id];
	     }
	     return res;
	}

	websocket = new WebSocket("ws://" + path + "/ws?userId=" + uid);
	websocket.onopen = function(event) {
		console.log("WebSocket:已连接");
		console.log(event);
	};
	
	websocket.onmessage = function(event) {
		var data = JSON.parse(event.data);
		console.log("WebSocket:收到一条消息", data);
		var textCss = data.from;
		$("#content").append("<div class='fmsg'><label class='name'>" + data.fromName+ "&nbsp;" + data.date+ "</label><div class='"+textCss+"'>" + data.text+ "</div></div>");
		scrollToBottom();
	};
	
	websocket.onerror = function(event) {
		console.log("WebSocket:发生错误 ");
		console.log(event);
	};
	
	websocket.onclose = function(event) {
		console.log("WebSocket:已关闭");
		console.log(event);
	}
	
	function sendMsg() {
		var v=$("#msg").val();
		if(v==""){
			return;
		}
		$.ajax({
			url :'msg/broadcast.do',
			type : "post",
			data : {
				text : $("#msg").val(),
				from : from
			},
			dataType : "json",
			success : function(data) {
				$("#content").append("<div class='tmsg'><label class='name'>我&nbsp;"+ new Date().Format("yyyy-MM-dd hh:mm:ss")
								+ "</label><div class='tmsg_text'>" + data.text+ "</div></div>");
				scrollToBottom();
			}
		});
		$("#msg").val('');
	}

	function scrollToBottom() {
		var div = document.getElementById('content');
		div.scrollTop = div.scrollHeight;
	}

	Date.prototype.Format = function(fmt) { //author: meizz 
		var o = {
			"M+" : this.getMonth() + 1, //月份 
			"d+" : this.getDate(), //日 
			"h+" : this.getHours(), //小时 
			"m+" : this.getMinutes(), //分 
			"s+" : this.getSeconds(), //秒 
			"q+" : Math.floor((this.getMonth() + 3) / 3), //季度 
			"S" : this.getMilliseconds()
		//毫秒 
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for ( var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]):(("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}

	function send(event) {
		var code;
		if (window.event) {
			code = window.event.keyCode; // IE
		} else {
			code = e.which; // Firefox
		}
		if (code == 13) {
			sendMsg();
		}
	}

	function clearAll() {
		$("#content").empty();
	}
</script>
</head>
<body>
	欢迎：<div id="chatName"></div>
	<div id="content"></div>
	<input type="text" placeholder="请输入要发送的信息" id="msg" class="msg" onkeydown="send(event)">
	<input type="button" value="发送" class="send" onclick="sendMsg()">
	<input type="button" value="清空" class="clear" onclick="clearAll()">
</body>
</html>
